<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Call-By-UserName using RTCMultiConnection</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="shortcut icon" href="/demos/logo.png">
  <link rel="stylesheet" href="/demos/stylesheet.css">
  <script src="/demos/menu.js"></script>
  <style type="text/css">
      table {
        width: 100%;
      }

      td {
        vertical-align: top;
      }

      td:first-child {
        text-align: right;
        width: 45%;
      }

      td:last-child {
        text-align: left;
        padding-left: 10px;
        width: 45%;
      }
  </style>
</head>
<body>
  <header>
    <a class="logo" href="/"><img src="/demos/logo.png" alt="RTCMultiConnection"></a>
    <a href="/" class="menu-explorer">Menu<img src="/demos/menu-icon.png" alt="Menu"></a>
    <nav>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/demos/">Demos</a>
      </li>
      <li>
        <a href="https://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
      </li>
      <li>
        <a href="https://www.rtcmulticonnection.org/FAQ/">FAQ</a>
      </li>
      <li>
        <a href="https://www.youtube.com/playlist?list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl">YouTube</a>
      </li>
      <li>
        <a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
      </li>
      <li>
        <a href="https://github.com/muaz-khan/RTCMultiConnection">Github</a>
      </li>
    </nav>
  </header>

  <h1>
    Call-By-UserName
    <p class="no-mobile">
      Call Any Person By His UserName.
    </p>
  </h1>

  <section class="make-center">
    <table>
        <tr>
            <td style="padding-bottom: 40px;">
                <label for="current-username">Your UserName:</label>
                <input type="text" id="current-username" value="you" autocorrect=off autocapitalize=off size=20>
            </td>

            <td>
                <button id="change-your-own-username">Set Your UserName</button>
            </td>
        </tr>

        <tr>
            <td>
                <label for="callee-username">Callee UserName:</label>
                <input type="text" id="callee-username" value="he" autocorrect=off autocapitalize=off size=20>
            </td>
            <td>
                <button id="join-callee-using-his-username" disabled>Make a Video Call</button>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <div id="videos-container" style="margin: 20px 0;"></div>
            </td>
        </tr>
    </table>

    
  </section>

<script src="/dist/RTCMultiConnection.min.js"></script>
<script src="/node_modules/webrtc-adapter/out/adapter.js"></script>
<script src="/socket.io/socket.io.js"></script>

<!-- custom layout for HTML5 audio/video elements -->
<link rel="stylesheet" href="/dev/getHTMLMediaElement.css">
<script src="/dev/getHTMLMediaElement.js"></script>
<script>
// ......................................................
// ..................RTCMultiConnection Code.............
// ......................................................

var connection = new RTCMultiConnection();

// by default, socket.io server is assumed to be deployed on your own URL
connection.socketURL = '/';

// comment-out below line if you do not have your own socket.io server
// connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

connection.socketMessageEvent = 'call-by-username-demo';

// do not shift room control to other users
connection.autoCloseEntireSession = true;

connection.session = {
    audio: true,
    video: true,
    broadcast: true // if you remove this, then it becomes MANY-to-MANY
};

connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

// https://www.rtcmulticonnection.org/docs/iceServers/
// use your own TURN-server here!
connection.iceServers = [{
    'urls': [
        'stun:stun.l.google.com:19302',
        'stun:stun1.l.google.com:19302',
        'stun:stun2.l.google.com:19302',
        'stun:stun.l.google.com:19302?transport=udp',
    ]
}];

connection.videosContainer = document.getElementById('videos-container');
connection.onstream = function(event) {
    var existing = document.getElementById(event.streamid);
    if(existing && existing.parentNode) {
      existing.parentNode.removeChild(existing);
    }

    event.mediaElement.removeAttribute('src');
    event.mediaElement.removeAttribute('srcObject');
    event.mediaElement.muted = true;
    event.mediaElement.volume = 0;

    var video = document.createElement('video');

    try {
        video.setAttributeNode(document.createAttribute('autoplay'));
        video.setAttributeNode(document.createAttribute('playsinline'));
    } catch (e) {
        video.setAttribute('autoplay', true);
        video.setAttribute('playsinline', true);
    }

    if(event.type === 'local') {
      video.volume = 0;
      try {
          video.setAttributeNode(document.createAttribute('muted'));
      } catch (e) {
          video.setAttribute('muted', true);
      }

      connection.dontCaptureUserMedia = true;
    }
    video.srcObject = event.stream;

    var width = parseInt(connection.videosContainer.clientWidth / 3) - 20;
    var mediaElement = getHTMLMediaElement(video, {
        title: event.userid,
        buttons: ['full-screen'],
        width: width,
        showOnMouseEnter: false
    });

    connection.videosContainer.appendChild(mediaElement);

    setTimeout(function() {
        mediaElement.media.play();
    }, 5000);

    mediaElement.id = event.streamid;
};

connection.onstreamended = function(event) {
    var mediaElement = document.getElementById(event.streamid);
    if (mediaElement) {
        mediaElement.parentNode.removeChild(mediaElement);
    }
};

connection.onMediaError = function(e) {
    if (e.message === 'Concurrent mic process limit.') {
        if (DetectRTC.audioInputDevices.length <= 1) {
            alert('Please select external microphone. Check github issue number 483.');
            return;
        }

        var secondaryMic = DetectRTC.audioInputDevices[1].deviceId;
        connection.mediaConstraints.audio = {
            deviceId: secondaryMic
        };

        connection.join(connection.sessionid, function(isRoomJoined, roomid, error) {
          if(error) {
            alert(error);
          }
        });
    }
};

// ..................................
// ALL below scripts are redundant!!!
// ..................................

var joinCalleeUsingHisUsername = document.getElementById('join-callee-using-his-username');
joinCalleeUsingHisUsername.onclick = function() {
    this.disabled = true;
    connection.checkPresence(calleeUserName.value, function(isOnline, username) {
        if(!isOnline) {
            joinCalleeUsingHisUsername.disabled = false;
            alert(username + ' is not online.');
            return;
        }

        connection.join(username, function(isRoomJoined, roomid, error) {
          if(error) {
            alert(error);
          }
        });
    });

    setTimeout(function() {
        joinCalleeUsingHisUsername.disabled = false;
    }, 1000);
};

// caller
var currentUserName = document.getElementById('current-username');
currentUserName.onkeyup = currentUserName.onpaste = currentUserName.oninput = function() {
    localStorage.setItem(this.id, this.value);
};
currentUserName.value = localStorage.getItem(currentUserName.id) || connection.token();

document.getElementById('change-your-own-username').onclick = function() {
    this.disabled = true;
    connection.open(currentUserName.value, function(isRoomOpened, roomid, error) {
      if(error) {
        alert(error);
      }

      joinCalleeUsingHisUsername.disabled = false;
    });
};

// callee
var calleeUserName = document.getElementById('callee-username');
calleeUserName.onkeyup = calleeUserName.onpaste = calleeUserName.oninput = function() {
    localStorage.setItem(this.id, this.value);
};
calleeUserName.value = localStorage.getItem(calleeUserName.id) || connection.token();

// detect 2G
if(navigator.connection &&
   navigator.connection.type === 'cellular' &&
   navigator.connection.downlinkMax <= 0.115) {
  alert('2G is not supported. Please use a better internet service.');
}
</script>

  <footer>
    <small id="send-message"></small>
  </footer>

  <script src="https://www.webrtc-experiment.com/common.js"></script>
</body>
</html>
